<template>
	<view class="user-info-bar-components" :style="[wrapStyle]">
		<view class="user-info-bar-mode-1" @click="handleClick" v-if="mode == 1">
			<image class="user-avatar" :style="[avatarStyle]" :src="userInfo.headImg || defaultAvatar" mode=""></image>
			<view class="user-info" :style="{color}" v-if="$u.test.empty(userInfo)">
				<view class="info-left">
					<text class="user-name text-cut-1" :style="[nameStyle]">点击登录授权</text>
				</view>
			</view>
			<view class="user-info" :style="{color}" v-else>
				<view class="info-left">
					<text class="user-name text-cut-1" :style="[nameStyle]">{{ userInfo.name }}</text>
					<text class="user-phone text-cut-1">{{ userInfo.phone || '填写手机号码更多服务体验哦' }}</text>
				</view>
			</view>
			<view class="info-right">
				<slot></slot>
			</view>
			<u-icon v-if="showIcon" name="arrow-right" size="30" :color="color"></u-icon>
		</view>
        <view class="user-info-bar-mode-2" @click="handleClick" v-if="mode == 2">
        	<view class="left-wrap">
                <text class="name-text" :style="[nameStyle]">{{ userInfo.name || '点击登录授权' }}</text>
                <text class="desc-text">好运加身，大橘大利</text>
            </view>
        	<view class="right-wrap">
                <image class="user-avatar" :style="[avatarStyle]" :src="userInfo.headImg || defaultAvatar" mode=""></image>
            </view>
        </view>
	</view>
</template>

<script>
import mixins from '@/mixins/components.js';
import { mapState } from 'vuex';
export default {
	name: 'UserInfoBar',
	mixins: [mixins],
	props:{
        mode: {
            type: [Number, String],
            default: 1
        },
		color: {
			type: String,
			default: '#fff'
		},
        nameSize: {
            type: [Number, String],
            default: 32
        },
        avatarSize: {
            type: [Number, String],
            default: 114
        },
        showIcon: {
        	type: Boolean,
        	default: true
        },
	},
	data() {
		return {
		}
	},
	methods: {
		// 点击事件
		handleClick() {
            if(this.login){
                this.$emit('click',this.userInfo);
            }else {
                uni.$emit(`auth-login-${this.pageId}`,{});
            }
		}
	},
	computed: {
		...mapState(['userInfo','login','pageId']),
        nameStyle(){
            let style = {};
            style.color = this.color;
            style.fontSize = /[rpx]/.test(this.nameSize) ? this.nameSize : `${this.nameSize}rpx`;
            return style;
        },
        avatarStyle(){
            let style = {};
            style.width = /[rpx]/.test(this.avatarSize) ? this.avatarSize : `${this.avatarSize}rpx`;
            style.height = /[rpx]/.test(this.avatarSize) ? this.avatarSize : `${this.avatarSize}rpx`;
            return style;
        }
	},
};
</script>

<style scoped lang="scss">
.user-info-bar-components {
	width: 750rpx;
    display: flex;
	.user-info-bar-mode-1 {
		width: 100%;
		display: flex;
		align-items: center;
		.user-avatar {
			width: 80rpx;
			height: 80rpx;
			flex-shrink: 0;
            border-radius: 100%;
			margin-right: 30rpx;
		}
		.user-info {
			flex: 1;
            z-index: 66;
			display: flex;
			align-items: center;
			.info-left{
				flex: 1;
				display: flex;
				flex-direction: column;
				.user-name {
					font-weight: bold;
				}
			}
			.info-right{
				flex-shrink: 0;
			}
		}
	}
    .user-info-bar-mode-2{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .left-wrap{
            display: flex;
            flex-direction: column;
            .name-text{}
            .desc-text{
                color: #F3F3F3;
                margin-top: 5rpx;
            }
        }
        .right-wrap{
            display: flex;
            .user-avatar{
                border-radius: 100%;
            }
        }
    }
}
</style>
